<template>
  <div id="theme" class="container">
    <h3 class="title"><span />模板管理</h3>

    <div class="content">
      <el-tabs id="tabcard" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="已安装模板" name="first">
          <Moulded v-if="activeName == 'first'" />
        </el-tab-pane>
        <el-tab-pane label="系统模板" name="second">
          <BouncedDialog title="安装模板" :dialog-show.sync="dialogShow" :width="50" class="dialog">
            <el-form ref="themeForm" :model="themeForm" inline :rules="themeRules" label-width="70px">
              <el-form-item label="模板：" prop="theme">
                <el-input v-model="themeForm.theme" disabled />
              </el-form-item>
              <el-form-item label="站点：" prop="website_id">
                <el-select v-model="themeForm.website_id" placeholder="请选择" disabled style="width:100%" @change="handleChange">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.domain"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="语言" prop="lang">
                <el-select v-model="themeForm.lang" style="width:100%">
                  <el-option
                    v-for="item in themeLang"
                    :key="item.id"
                    :label="item.lang"
                    :value="item.lang"
                  />
                </el-select>
              </el-form-item>
              <div class="btn">
                <el-button @click="dialogShow= false">取 消</el-button>
                <el-button type="primary" :loading="loading" @click="submittheme()">确 定</el-button>
              </div>
            </el-form>
          </BouncedDialog>
          <el-table :data="themeList">
            <el-table-column label="模板" prop="theme" />
            <el-table-column label="版本号" prop="version" />
            <el-table-column label="语言" prop="lang" />
            <el-table-column label="作者" prop="author" />
            <el-table-column label="模板描述" prop="description" />
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="install(scope.row)">模板安装</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

      </el-tabs>
    </div>

  </div>
</template>
<script>
import Moulded from './components/installedMould.vue'
import mouldApi from '@/api/theme.js'
import websiteApi from '@/api/website.js'
import langApi from '@/api/websetting'
export default {
  components: {
    Moulded
  },
  data() {
    return {
      activeName: 'first',
      themeList: [],
      dialogShow: false,
      options: [],
      themeForm: {
        website_id: ''
      },
      themeRules: {
        website_id: [
          { required: 'true', message: '请选择站点', trigger: 'blur' }
        ]
      },
      themeLang: [],
      loading: false
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.themeForm.website_id = val
    }
  },
  created() {
    // if (this.themeForm.website_id) {
    this.themeForm.website_id = this.$store.getters.siteId
    this.getList()
    this.getLang()
    // }
  },
  methods: {
    // 站点语言列表
    getLang() {
      langApi.langInfo({ site_id: this.themeForm.website_id }).then(res => {
        this.themeLang = res.data
      })
    },
    // 系统模板
    getList() {
      mouldApi.themeList().then(res => {
        this.themeList = res.data
      })
    },
    // 模板安装
    install(row) {
      this.getWeblist()
      this.getLang()
      this.themeForm.theme = row.theme
      this.dialogShow = true
    },
    submittheme() {
      this.loading = true
      mouldApi.saveTheme({ ...this.themeForm }).then(res => {
        if (res.code == 0) {
          this.loading = false
          this.$message.success(res.msg)
          this.dialogShow = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取站点列表
    getWeblist() {
      websiteApi.websiteList().then(res => {
        this.options = res.data

        this.themeForm.website_id = this.$store.getters.siteId
        // this.themeForm.website_id = res.data[0].id
        // this.getList()
      })
    },
    handleChange(val) {

      // this.themeForm.website_id = val
    },
    handleClick(tab, event) {

    }
  }

}
</script>
<style lang='scss'>
#theme{
  .el-form-item{
    width: 100%;
  }
  .el-form-item__content{
    width: calc(100% - 80px);
  }
}
</style>
<style lang="scss" scoped>
.content{
  // background-color: #fff;
  padding: 20px;
}
</style>
